<template>
    <div class="listTemplate">
        <header class="t-header">
            <mu-button flat small class="t-close" v-close><i class="iconfont iconangle-left"></i></mu-button>
            <span class="t-title">质量检查详情</span>
        </header>
        <section class="t-body">
            <!--检查人-->
            <mu-expansion-panel :expand="true">
                <div slot="header">检查人：马云</div>
                <section class="box">
                    <p class="line-list textdot">
                        <span class="">项目名称：中建八局企业微信项目 </span>
                    </p>
                    <p class="line-list">
                        <span>检查类型：A3-F5</span>
                    </p>
                    <p class="line-list">
                        <span>所属区域：A3-F5</span>
                    </p>
                    <p class="line-list textdot">
                        <span>检查部位：大梁根基</span>
                    </p>
                    <p class="line-list">
                        <span>检查表：检查表名称</span>
                        <section class="table">
                            <div class="tr header">
                                <div class="td">测试检查表</div>
                            </div>
                            <div class="tr subheader">
                                <div class="td">检查项</div>
                                <div class="td">检查内容</div>
                                <div class="td">检查结果</div>
                            </div>
                            <div class="tr">
                                <div class="td">检查项名</div>
                                <div class="td" style="width:200%;">
                                    <div class="tr">
                                        <div class="td">检查内容1</div>
                                        <div class="td">
                                            <mu-checkbox label="有隐患" disabled></mu-checkbox>
                                            <mu-checkbox label="无隐患1" v-model="selected" disabled></mu-checkbox>
                                        </div>
                                    </div>
                                    <div class="tr">
                                        <div class="td">检查内容2</div>
                                        <div class="td">
                                            <mu-checkbox label="有隐患" disabled></mu-checkbox>
                                            <mu-checkbox label="无隐患" v-model="selected" disabled></mu-checkbox>
                                        </div>
                                    </div>
                                </div>
                                <!-- <div class="td">
                                  <div class="td">
                                    <mu-checkbox label="有隐患" disabled></mu-checkbox>
                                    <mu-checkbox label="无隐患" v-model="selected" disabled></mu-checkbox>
                                  </div>
                                  <div class="td">
                                    <mu-checkbox label="有隐患" disabled></mu-checkbox>
                                    <mu-checkbox label="无隐患" v-model="selected" disabled></mu-checkbox>
                                  </div>
                                </div> -->

                            </div>
                        </section>
                    </p>
                    <p class="line-list">
                        <span>检查结果：2个问题</span>
                    </p>
                    <mu-expansion-panel class="noshadow">
                        <div slot="header">问题一</div>
                        <p class="line-list textdot">
                            <span>问题类型：质量问题</span>
                        </p>
                        <p class="line-list textdot">
                            <span>问题等级：一般问题</span>
                        </p>
                        <section class="img-box">
                            现场照片：
                            <img src="../../../assets/img/default.png"/>
                        </section>
                        <p class="line-list textdot">
                            <span>问题描述：中建八局企业微信项目中建八局企业微信项目中建八局企业微信项目</span>
                        </p>
                        <p class="line-list flex_b">
                            <span>平面图标记</span>
                            <span class="active-color">查看</span>
                        </p>
                        <p class="line-list flex_b">
                            <span>整改期限：立即整改</span>
                        </p>
                        <p class="line-list textdot">
                            <span>整改要求：中建八局企业微信项目中建八局企业微信项目中建八局企业微信项目</span>
                        </p>
                        <p class="line-list flex_b">
                            <span>责任单位：第三单位</span>
                        </p>
                        <p class="line-list flex_b">
              <span>整改责任人：
                <mu-avatar color="primary" size="25">兰</mu-avatar>
                兰文亮
              </span>
                        </p>
                        <p class="line-list flex_b">
              <span>抄送人：
                <mu-avatar color="primary" size="25">兰</mu-avatar>
                兰文亮
              </span>
                        </p>
                    </mu-expansion-panel>
                    <mu-expansion-panel class="noshadow">
                        <div slot="header">问题二</div>
                        <p class="line-list textdot">
                            <span>问题类型：质量问题</span>
                        </p>
                        <p class="line-list textdot">
                            <span>问题等级：一般问题</span>
                        </p>
                        <section class="img-box">
                            现场照片：
                            <img src="../../../assets/img/default.png"/>
                        </section>
                        <p class="line-list textdot">
                            <span>问题描述：中建八局企业微信项目中建八局企业微信项目中建八局企业微信项目</span>
                        </p>
                        <p class="line-list flex_b">
                            <span>平面图标记</span>
                            <span class="active-color">查看</span>
                        </p>
                        <p class="line-list flex_b">
                            <span>整改期限：立即整改</span>
                        </p>
                        <p class="line-list textdot">
                            <span>整改要求：中建八局企业微信项目中建八局企业微信项目中建八局企业微信项目</span>
                        </p>
                        <p class="line-list flex_b">
                            <span>责任单位：第三单位</span>
                        </p>
                        <p class="line-list flex_b">
              <span>整改责任人：
                <mu-avatar color="primary" size="25">兰</mu-avatar>
                兰文亮
              </span>
                        </p>
                        <p class="line-list flex_b">
              <span>抄送人：
                <mu-avatar color="primary" size="25">兰</mu-avatar>
                兰文亮
              </span>
                        </p>
                    </mu-expansion-panel>

                </section>
            </mu-expansion-panel>
            <!--整改责任人-->
            <mu-expansion-panel class="noshadow">
                <div slot="header">整改责任人：张三</div>
                <p class="line-list textdot">
                    <span>整改责任人：张三</span>
                </p>
                <p class="line-list textdot">
                    <span>整改完成时间：2019-09-25 15:23</span>
                </p>
                <section class="img-box">
                    现场照片：
                    <img src="../../../assets/img/default.png"/>
                </section>
                <p class="line-list textdot">
                    <span>整改结果描述：中建八局企业微信项目中建八局企业微信项目中建八局企业微信项目</span>
                </p>
            </mu-expansion-panel>
            <!--复查人-->
            <mu-expansion-panel class="noshadow">
                <div slot="header">复查人：张三</div>
                <p class="line-list textdot">
                    <span>复查人：张三</span>
                </p>
                <p class="line-list textdot">
                    <span>复查时间：2019-09-25 15:23</span>
                </p>
                <p class="line-list textdot">
                    <span>复查结果描述：中建八局企业微信项目中建八局企业微信项目中建八局企业微信项目</span>
                </p>
                <section class="img-box">
                    现场照片：
                    <img src="../../../assets/img/default.png"/>
                </section>

            </mu-expansion-panel>
            <section>
                <mu-form :model="form" class="mu-demo-form" :label-position="labelPosition" label-width="100"
                         style="background-color:#fff;margin-top:10px;padding: 10px;">
                    <mu-form-item prop="radio" label="检查结果">
                        <mu-radio v-model="form.radio" value="male" label="合格"></mu-radio>
                        <mu-radio v-model="form.radio" value="female" label="不合格"></mu-radio>
                    </mu-form-item>
                    <mu-form-item label="抄送人" prop="username">
                        <mu-text-field type="password" v-model="form.username" prop="username"></mu-text-field>
                    </mu-form-item>
                    <!-- <mu-form-item prop="textarea" label="检查结果描述">
                      <mu-text-field multi-line :rows="3" :rows-max="6" v-model="form.textarea"></mu-text-field>
                    </mu-form-item> -->
                </mu-form>
                <div style="padding:10px;">
                    <p>现场照片</p>
                    <a-upload
                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                            listType="picture-card"
                            :fileList="fileList"
                            @preview="handlePreview"
                            @change="handleChange"
                    >
                        <div v-if="fileList.length < 3">
                            <a-icon type="plus"/>
                            <div class="ant-upload-text">Upload</div>
                        </div>
                    </a-upload>
                    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                        <img alt="example" style="width: 100%" :src="previewImage"/>
                    </a-modal>
                    <mu-flex justify-content="around" align-items="center">
                        <mu-button small>取消</mu-button>
                        <mu-button small color="primary">确认</mu-button>
                    </mu-flex>
                </div>
            </section>
        </section>
    </div>
</template>

<script>
    export default {
        name: 'mainPage',
        data () {
            return {
                num: 20,
                refreshing: false,
                loading: false,
                text: 'List',
                open: false,
                selected: true,
                activeStep: 0,
                options: [
                    'Option 1', 'Option 2', 'Option 3', 'Option 4',
                    'Option 5', 'Option 6', 'Option 7', 'Option 8',
                    'Option 9', 'Option 10'
                ],
                labelPosition: 'left',
                form: {
                    input: '',
                    select: '',
                    date: '',
                    radio: '',
                    checkbox: [],
                    switch: false,
                    slider: 30,
                    textarea: ''
                },
                previewVisible: false,
                previewImage: '',
                fileList: [{
                    uid: '-1',
                    name: 'xxx.png',
                    status: 'done',
                    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                }],
            }
        },
        mounted () {

        },
        created () {
            console.log(this.$route.query.info);
            this.object = this.$route.query.info
        },
        methods: {
            handleCancel () {
                this.previewVisible = false
            },
            handlePreview (file) {
                this.previewImage = file.url || file.thumbUrl
                this.previewVisible = true
            },
            handleChange ({fileList}) {
                this.fileList = fileList
            },


        },
    }
</script>
<style lang="scss" scoped>
    .listTemplate {
        height: 100%;
        width: 100%;
        position: relative;
        overflow: hidden;
        .t-header {
            height: 0.45rem;
            width: 100%;
            color: #3D3D3D;
            box-sizing: border-box;
            padding: 5px 8px;
            position: relative;
            // box-shadow: 0 2px 4px -1px rgba(0,0,0,.07), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 7px 0 rgba(0,0,0,.12);
            -border-bottom: 1px solid #dedede;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .t-close {
                min-width: 28px;
                border-radius: 50%;
            }
            .t-title {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 0.19rem;
                font-weight: 500;
            }
            .t-right-icon {
                font-size: 0.2rem;
            }
        }
        .t-body {
            height: calc(100% - 0.45rem);
            width: 100%;
            overflow: auto;
            background-color: #F8F8F8;
            padding: 10px;
        }
        .t-body + .t-footer {
            height: 0.45rem;
            width: 100%;
        }
        .t-footer + .t-body {
            height: calc(100% - 0.9rem);
        }
        // 自定义样式
        .box {
            padding: 10px 15px;
            background-color: #fff;
        }
        .line-list {
            margin: 15px 0;
            font-size: 0.15rem;
        }
        .textdot {
            display: block;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .table {
             width: 100%;
             height: auto;
             border: 1px solid #dedede;
             font-size: 0.12rem;
             line-height: 0.2rem;
             .tr {
                 width: 100%;
                 border-bottom: 1px solid #dedede;
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 .td {
                     border-left: 1px solid #dedede;
                     width: 100%;
                     text-align: center;
                     .tr {
                         border-bottom: 1px solid #dedede;
                         border-left: none;
                     }
                     > .tr:last-child {
                         border: none;
                     }
                 }
                 > .td:first-child {
                     border: none;
                 }
                 .tr {
                     border-left: 1px solid #dedede;
                 }
             }
             > .tr:last-child {
                 border: none;
             }
             .header {
                 background-color: #ddd;
                 color: #000;
             }
             .subheader {
                 background-color: #eee;
                 color: #333;
             }
         }
    }
</style>
<style lang="scss">
    .t-close {
        .mu-button-wrapper {
            padding: 0 !important;
        }
    }

    .active-color {
        color: #FF8A1B;
    }

    .td {
        .mu-checkbox-svg-icon {
            height: 20px;
            width: 20px;
        }
        .mu-checkbox {
            line-height: 20px;
            height: 20px;
        }
    }

    .t-body {
        .mu-expansion-panel-header {
            padding: 0 10px;
        }
        .mu-expansion-panel-content {
            padding: 0 5px;
        }
        .mu-expansion-panel__expand .mu-expansion-panel-header {
            min-height: 20px;
        }
    }

    .flex_b {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .noshadow.mu-elevation-2 {
        box-shadow: none;

    }

    .stepper-lan {
        .mu-step-label {
            position: relative;
            .desc {
                position: absolute;
                top: 5px;
                transform: translateX(-50%);
                left: 50%;
                white-space: nowrap;
                font-size: 0.12rem;
            }
            .deTime {
                font-size: 0.12rem;
                position: absolute;
                bottom: 5px;
                transform: translateX(-50%);
                left: 50%;
                white-space: nowrap;
                font-size: 0.12rem;
            }
        }
    }
</style>
